<template>
  <div class="fileManage">
    <div class="fileManage_box">
      <div class="left-directory">
        <el-input
          placeholder="关键字搜索"
          v-model="searchKey"
          class="mb-20px px-20px"
          @change="queryFile"
        >
          <template #append>
            <el-button icon="Search" @click="queryFile" /> </template
        ></el-input>
        <div>
          <div
            v-for="(v, index) in directory"
            :key="v.fileId"
            class="menu"
            :class="{ active: index === active }"
            @click="changeDirectory(index)"
          >
            {{ v.origFileName }}
          </div>
        </div>
      </div>
      <div class="right-file">
        <template v-for="v in operation">
          <el-button
            type="primary"
            plain
            :key="v.name"
            :icon="v.icon"
            @click="v.event(v.type)"
            :loading="v.name === '删除' && loading"
            class="mt-10px"
            v-if="!isCanStartList || v.name === '下载'"
            v-hasPermi="[v.permission]"
          >
            {{ v.name }}
          </el-button>
        </template>

        <div class="my-20px">
          <el-breadcrumb separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="(v, i) in filePath" :key="v + i"
              ><a
                href="#"
                @click="changeFolder(v)"
                v-if="i !== filePath.length - 1"
              >
                {{ v }}
              </a>
              <span v-else>{{ v }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-dblclick="intoFloder"
          id="fileTable"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="fileName"
            label="文件名称"
            min-width="300"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div v-if="scope.row.isDir === '1'">
                <!-- <i class="i-fluent-emoji-file-folder"></i> -->
                <svg-icon :icon-class="'file_folder'"></svg-icon>
                <span class="ml-5px">{{ scope.row.origFileName }}</span>
              </div>
              <div v-else>
                <!-- <i class="iconfont icon-wenjian"></i> -->
                <svg-icon
                  :icon-class="getSvgName(scope.row.fileType)"
                  class="w-18px h-18px align-middle"
                ></svg-icon>
                <span
                  class="ml-5px"
                  :class="scope.row.openStatus == 0 ? 'cursor-pointer' : ''"
                  :style="scope.row.openStatus == 0 ? { color: '#409eff' } : ''"
                  @click="preview(scope.row)"
                  >{{ scope.row.origFileName }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column prop="fileSize" label="文件大小" width="120" />
          <el-table-column prop="openStatus" label="公开状态" width="150">
            <template #default="scope">
              <div>
                {{ open_state[scope.row.openStatus].label }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="200" />
          <el-table-column prop="createBy" label="上传人员" width="150" />
        </el-table>
        <pagination
          v-show="page.total > 0"
          :total="page.total"
          v-model:page="page.pageNum"
          v-model:limit="page.pageSize"
          @pagination="pageChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="fileOperation"
      width="30%"
      align-center
      :title="windowName[btnName]"
      :close-on-click-modal="false"
      :before-close="
        done => {
          reset()
          done()
        }
      "
    >
      <el-form ref="form" :data="formData">
        <el-form-item
          label="移动到："
          v-if="btnName === 'CopyDocument' || btnName === 'FolderOpened'"
          prop="moveTo"
        >
          <el-tree-select
            v-model="formData.moveTo"
            :data="fileTree"
            :props="{
              value: 'id',
              label: 'label',
              children: 'children'
            }"
            check-on-click-node
            node-key="id"
            check-strictly
          />
        </el-form-item>
        <el-form-item
          label="旧的名称："
          v-if="btnName === 'Edit'"
          prop="filename"
        >
          <el-input v-model="formData.filename" disabled />
        </el-form-item>
        <el-form-item
          label="新的名称："
          v-if="btnName === 'Edit'"
          prop="newFileName"
          :rules="[
            { required: true, message: '新的名称不能为空', trigger: 'blur' }
          ]"
        >
          <el-input v-model="formData.newFileName"></el-input>
        </el-form-item>
        <el-form-item
          :label="
            btnName === 'FolderAdd' ||
            (selectData.length && selectData[0].isDir === '1')
              ? '文件夹名称：'
              : '文件名称：'
          "
          v-if="
            btnName === 'Remarks' ||
            btnName === 'FolderAdd' ||
            btnName === 'Share' ||
            btnName === 'CopyDocument'
          "
          prop="filename"
        >
          <el-input
            v-model="formData.filename"
            :disabled="btnName === 'Remarks' || btnName === 'Share'"
          />
        </el-form-item>
        <el-form-item label="公开状态：" v-if="btnName === 'Share'">
          <el-select v-model="formData.openState">
            <el-option
              v-for="v in open_state"
              :key="v.value"
              :label="v.label"
              :value="v.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备注内容："
          v-if="
            btnName === 'Remarks' ||
            btnName === 'FolderAdd' ||
            btnName === 'Share'
          "
          prop="remarks"
        >
          <el-input
            type="textarea"
            placeholder="输入模板说明"
            :rows="5"
            maxlength="100"
            show-word-limit
            v-model="formData.remarks"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="showUpload"
      width="30%"
      align-center
      title="上传文件"
      :close-on-click-modal="false"
    >
      <el-upload
        class="upload-demo"
        drag
        multiple
        :http-request="requestFile"
        ref="uploadFile"
        :show-file-list="false"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处或<em>点击上传</em></div>
        <div class="el-upload__tip">
          按住Ctrl可同时多选，单个文件不能超过10mb，支持格式如下
        </div>
        <div class="el-upload__tip">
          <p>bmp, gif, jpg, jpeg, png, rar, zip, gz, bz2 mp4, avi, rmvb</p>
          <p>
            word excel powerpoint pdf doc, docx, xls, xlsx, ppt, pptx, html,
            htm, txt
          </p>
        </div>
      </el-upload>
      <div class="fileList">
        <div v-for="(v, i) in fileList" :key="i" class="mb-5px">
          <div
            class="text-14px"
            @mouseenter="showIndex = i"
            @mouseleave="showIndex = -1"
          >
            <span class="inline-block w-10/12 truncate"
              ><span :title="v.filename">{{ v.filename }}</span>
            </span>
            <span
              class="ml-10px cursor-pointer"
              v-if="v.type === 'exception' && showIndex === i"
              @click="delFile(v, i)"
              ><el-icon><CloseBold /></el-icon
            ></span>
          </div>
          <el-progress
            :percentage="v.percent"
            :status="v.type"
            :format="v.format"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="FileManage">
import { getCurrentInstance, watch, reactive } from 'vue'
import {
  listFiles,
  getFiles,
  searchFiles,
  uploadFiles,
  copyFiles,
  moveFiles,
  delFiles,
  addFiles,
  updateFilesInfo,
  getAttachFile,
  getFileListPage
} from '@/api/fileManage'
import { open_state } from '@/hooks/dict/contract.js'
import { useRouter } from 'vue-router'
import { downloadFile } from '@/utils/request'
import { viewFile } from '@/utils/commo'
const { proxy } = getCurrentInstance()
const router = useRouter()
// 操作按钮
const operation = [
  {
    name: '上传',
    icon: 'UploadFilled',
    event: type => operationEvent('UploadFilled', type),
    permission: 'file:manage:perm'
  },
  {
    name: '下载',
    icon: 'Download',
    event: type => operationEvent('Download', type),
    type: 'only-one',
    permission: 'all'
  },
  {
    name: '移动',
    icon: 'FolderOpened',
    event: type => operationEvent('FolderOpened', type),
    type: 'only-one',
    permission: 'file:manage:perm'
  },
  {
    name: '重命名',
    icon: 'Edit',
    event: type => operationEvent('Edit', type),
    type: 'only-one',
    permission: 'file:manage:perm'
  },
  {
    name: '备注',
    icon: 'Edit',
    event: type => operationEvent('Remarks', type),
    type: 'only-one',
    permission: 'file:manage:perm'
  },
  {
    name: '复制',
    icon: 'CopyDocument',
    event: type => operationEvent('CopyDocument', type),
    type: 'only-one',
    permission: 'file:manage:perm'
  },
  {
    name: '删除',
    icon: 'Delete',
    event: type => operationEvent('Delete', type),
    type: 'at-least-one',
    permission: 'file:manage:perm'
  },
  {
    name: '公开状态',
    icon: 'Share',
    event: type => operationEvent('Share', type),
    type: 'only-one',
    permission: 'file:manage:perm'
  },
  {
    name: '新建文件夹',
    icon: 'FolderAdd',
    event: type => operationEvent('FolderAdd', type),
    permission: 'file:manage:perm'
  }
]

// 弹窗标题
const windowName = {
  FolderOpened: '移动文件',
  Edit: '重命名文件',
  Remarks: '文件备注',
  CopyDocument: '复制文件',
  Share: '公开状态修改',
  FolderAdd: '新建文件夹'
}
// 搜索关键字
const searchKey = ref(null)
// 显示弹窗
const fileOperation = ref(false)
// 文件名
const btnName = ref('')
// 目录激活
const active = ref(0)
// 显示上传组件
const showUpload = ref(false)
// 显示关闭x
const showIndex = ref(-1)
// 等待删除
const loading = ref(false)
const data = reactive({
  filePath: [],
  fileID: [],
  formData: {
    moveTo: '',
    filename: '',
    newFileName: '',
    remarks: '',
    openState: null
  },
  page: {
    total: 0,
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  directory: [],
  fileTree: [],
  selectData: [],
  fileList: []
})

const {
  filePath,
  fileID,
  formData,
  page,
  tableData,
  directory,
  fileTree,
  selectData,
  fileList
} = toRefs(data)

const isCanStartList = computed(() => {
  return filePath.value.indexOf('合同范本') > -1
})

watch(
  () => formData.value.moveTo,
  (newVal, oldVal) => {
    if (!newVal) {
      formData.value.moveTo = oldVal
    }
  }
)

init()
async function init() {
  // 获取左侧目录
  await getList({}, 0, true)
  filePath.value = [directory.value[0].origFileName]
  fileID.value = [
    { id: directory.value[0].fileId, name: directory.value[0].origFileName }
  ]
  // 默认获取第一个目录下的文件及文件夹
  await getList({}, fileID.value[0].id)
  fileTree.value = await listFiles()
  fileTree.value = fileTree.value.filter(v => v.label !== '合同范本')
}
function pageChange() {
  const { length } = fileID.value
  getList({}, fileID.value[length - 1].id)
}

// 请求数据
async function getList(pages, id = 0, type = false) {
  if (pages && pages.page) {
    page.value.pageNum = pages.page
    page.value.pageSize = pages.limit
  }
  let resp
  if (type) {
    resp = await getFiles({ fileId: id, recursive: false })
    if (resp.code === 200) {
      if (directory.value && directory.value.length === 0 && id === 0) {
        directory.value = resp.data.folder || []
      } else {
        if (resp.data.folder || resp.data.file) {
          tableData.value = [...resp.data.folder, ...resp.data.file]
        } else {
          tableData.value = []
        }
        page.value.total = resp.data.total
      }
    }
  } else {
    resp = await getFileListPage({
      fileId: id,
      pageNum: page.value.pageNum,
      pageSize: page.value.pageSize,
      recursive: type
    })
    if (resp.code === 200) {
      if (directory.value && directory.value.length === 0 && id === 0) {
        directory.value = resp.data.folder || []
      } else {
        if (resp.data.records && resp.data.records.length) {
          tableData.value = resp.data.records
        } else {
          tableData.value = []
        }
        page.value.total = resp.data.total
      }
    }
  }
}
// 搜索文件
function queryFile() {
  if (searchKey.value) {
    searchFiles({ searchCode: searchKey.value }).then(res => {
      if (res.code === 200) {
        tableData.value = [...res.data.folder, ...res.data.file]
        page.value.total = 0
      }
    })
  } else {
    const { length } = fileID.value
    getList({}, fileID.value[length - 1].id)
  }
}
// 选择目录
function changeDirectory(index) {
  if (active.value !== index) {
    active.value = index
    const sData = directory.value[index]
    filePath.value = [sData.origFileName]
    fileID.value = [{ id: sData.fileId, name: sData.origFileName }]
    getList({}, sData.fileId)
  }
}
// 操作按钮事件
async function operationEvent(name, type) {
  let res = verify(type)
  const { length } = fileID.value
  const id = fileID.value[length - 1].id
  if (res) {
    if (name === 'UploadFilled') {
      // 上传
      showUpload.value = true
    } else if (name === 'Download') {
      // 下载
      const sData = selectData.value[0]
      if (sData.isDir === '1') {
        proxy.$modal.msgWarning('当前功能不支持下载文件夹，请选择文件进行下载')
        return
      }
      if (sData.openStatus === '1') {
        router.push({
          path: '/rsgl/other/downloadApprove',
          query: {
            file: encodeURI(
              JSON.stringify({
                ...sData,
                fileAttribute: fileID.value[0].name,
                directoryId: fileID.value[0].id
              })
            )
          }
        })
        return
      }
      if (filePath.value.indexOf('合同范本') > -1) {
        downloadFileToUrl()
      } else {
        downloadFile(sData.fileId, sData.origFileName)
      }
    } else if (name === 'Delete') {
      const dirArr = selectData.value.filter(v => v.isDir === '1')
      loading.value = true
      if (dirArr.length) {
        const files = selectData.value.filter(v => v.isDir === '0')
        // 删除文件夹
        const idArr = []
        if (files.length) {
          idArr.push(...files.map(v => v.fileId))
        }
        let fileLength = files.length,
          folderLength = 0
        dirArr.forEach(async (v, i) => {
          const res = await getFiles({ fileId: v.fileId, recursive: true })
          fileLength += res.data.file.length
          folderLength += res.data.folder.length
          idArr.push(
            ...res.data.file.map(v => v.fileId),
            ...res.data.folder.map(v => v.fileId)
          )
          if (i === dirArr.length - 1) {
            loading.value = false
            const tip = `当前共选中${fileLength}个文件，${folderLength}个文件夹，是否确认删除`
            proxy.$modal
              .confirm(tip, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(() => {
                delFiles(idArr).then(async res => {
                  if (res.code === 200) {
                    proxy.$modal.msgSuccess(res.data)
                  }
                  await getList({}, id)
                  fileTree.value = await listFiles()

                  fileTree.value = fileTree.value.filter(
                    v => v.label !== '合同范本'
                  )
                })
              })
          }
        })
      } else {
        loading.value = false
        // 删除文件
        proxy.$modal
          .confirm('是否确认删除?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            const ids = selectData.value.map(v => v.fileId)
            delFiles(ids).then(res => {
              if (res.code === 200) {
                proxy.$modal.msgSuccess(res.data)
              }
              getList({}, id)
            })
          })
      }
    } else {
      if (
        (name === 'CopyDocument' || name === 'FolderOpened') &&
        selectData.value[0].isDir === '1'
      ) {
        proxy.$modal.msgWarning('当前功能暂不支持选择文件夹')
        return
      }
      btnName.value = name
      fileOperation.value = true
      if (name !== 'FolderAdd') {
        // 非新建按钮
        const { length } = fileID.value
        formData.value.moveTo = fileID.value[length - 1].id + ''
        formData.value.filename = selectData.value[0].origFileName
        formData.value.remarks = selectData.value[0].remark
        formData.value.openState = selectData.value[0].openStatus
        if (name === 'CopyDocument') {
          // 复制按钮
          const index = formData.value.filename.lastIndexOf('.')
          const name = formData.value.filename.substring(0, index)
          const suffix = formData.value.filename.substring(index)
          formData.value.filename = name + '_复制' + suffix
        }
      }
    }
  }
}

// 验证
function verify(type) {
  switch (type) {
    case 'only-one':
      if (selectData.value.length !== 1) {
        proxy.$modal.msgWarning('该功能仅支持单选，请选择一条数据')
        return false
      }
      return true
    case 'at-least-one':
      if (selectData.value.length === 0) {
        proxy.$modal.msgWarning('请至少选择一条数据')
        return false
      }
      return true
    default:
      return true
  }
}

// 表格选择事件
function handleSelectionChange(data) {
  console.log(data, 'data')
  selectData.value = [...data]
}

// 切换文件路径
function changeFolder(path) {
  // 获取路径对应id
  const id = fileID.value.filter(v => v.name === path)[0].id
  // 保留路径
  const index = filePath.value.indexOf(path)
  filePath.value = filePath.value.slice(0, index + 1)
  fileID.value = fileID.value.slice(0, index + 1)
  getList({}, id)
}

// 进入文件夹
function intoFloder(row, cloumn, event) {
  if (row.isDir !== '1') {
    // 不是文件夹
    return
  }
  filePath.value.push(row.origFileName)
  fileID.value.push({ id: row.fileId, name: row.origFileName })
  getList({}, row.fileId)
}

// 关闭事件
function cancel() {
  fileOperation.value = false
  reset()
}

// 重置表单数据
function reset() {
  formData.value = {
    moveTo: '',
    filename: '',
    newFileName: '',
    remarks: '',
    openState: null
  }
}
// 确定事件
async function submit() {
  const sData = selectData.value[0]
  const { length } = fileID.value
  const id = fileID.value[length - 1].id
  switch (btnName.value) {
    case 'FolderOpened':
      moveFiles({
        fileId: sData.fileId,
        srcPathId: formData.value.moveTo
      }).then(async res => {
        if (res.code === 200) {
          updateFileTree(res.data, id, sData.isDir === '1')
        }
      })
      break
    case 'Edit':
      if (!formData.value.newFileName) {
        proxy.$modal.msgWarning('新的名称为空，请输入新的名称')
        return
      }
      const index = sData.origFileName.lastIndexOf('.')
      const suffix = sData.origFileName.substring(index)
      updateFilesInfo({
        fileId: sData.fileId,
        origFileName:
          formData.value.newFileName + (sData.isDir === '0' ? suffix : '')
      }).then(async res => {
        if (res.code === 200) {
          updateFileTree(res.data, id, sData.isDir === '1')
        }
      })
      break
    case 'Remarks':
      updateFilesInfo({
        fileId: sData.fileId,
        remark: formData.value.remarks
      }).then(async res => {
        if (res.code === 200) {
          updateFileTree(res.data, id, false)
        }
      })
      break
    case 'CopyDocument':
      copyFiles({
        fileId: sData.fileId,
        srcFileName: formData.value.filename,
        srcPathId: formData.value.moveTo
      }).then(async res => {
        if (res.code === 200) {
          updateFileTree(res.data, id, sData.isDir === '1')
        }
      })
      break
    case 'Share':
      if (sData.isDir === '1') {
        const res = await getFiles({ fileId: sData.fileId, recursive: true })
        const files = res.data.file.length
        const folder = res.data.folder.length
        const tip = `当前选中包含${files}个文件，${folder}个文件夹，是否确认修改`
        proxy.$modal
          .confirm(tip, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
            updateFilesInfo({
              fileId: sData.fileId,
              openStatus: formData.value.openState,
              remark: formData.value.remarks
            }).then(async res => {
              if (res.code === 200) {
                updateFileTree(res.data, id, sData.isDir === '1')
              }
            })
          })
          .catch(() => {
            cancel()
          })
      } else {
        updateFilesInfo({
          fileId: sData.fileId,
          openStatus: formData.value.openState,
          remark: formData.value.remarks
        }).then(async res => {
          if (res.code === 200) {
            updateFileTree(res.data, id, sData.isDir === '1')
          }
        })
      }

      break
    case 'FolderAdd':
      if (!formData.value.filename) {
        proxy.$modal.msgWarning('请输入文件夹名称')
        return
      }
      addFiles({
        fileId: id,
        objectName: formData.value.filename,
        remark: formData.value.remarks
      }).then(async res => {
        if (res.code === 200) {
          updateFileTree(res.data, id, true)
        }
      })
      break
  }
}

/**
 * @params 更新列表，文件树
 * @params msg--提示信息  id--请求所需列表id  boolean--是否重新请求文件树
 *
 */

async function updateFileTree(msg, id, boolean) {
  proxy.$modal.msgSuccess(msg)
  if (boolean) {
    fileTree.value = await listFiles()
    fileTree.value = fileTree.value.filter(v => v.label !== '合同范本')
  }
  cancel()
  getList({}, id)
}

// 上传文件
function requestFile(params) {
  const { length } = fileID.value
  let formData = new FormData()
  formData.append('file', params.file)
  formData.append('fileId', fileID.value[length - 1].id)
  const only = Symbol('id')
  const obj = {
    filename: params.file.name,
    type: '',
    percent: 0,
    id: only,
    format: () => '上传中'
  }
  fileList.value.push(obj)
  uploadFiles(formData)
    .then(res => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess(res.data)
        const { length } = fileID.value
        const id = fileID.value[length - 1].id
        getList({}, id)
        fileList.value.forEach(v => {
          if (v.id === only) {
            v.percent = 100
            v.type = 'success'
          }
        })
      }
    })
    .catch(err => {
      fileList.value.forEach(v => {
        if (v.id === only) {
          v.percent = 50
          v.type = 'exception'
        }
      })
    })
}

// 关闭上传
function close() {
  showUpload.value = false
  fileList.value = []
}

function delFile(item, index) {
  fileList.value.splice(index, 1)
}

function downloadFileToUrl() {
  if (!selectData.value[0].url) {
    proxy.$modal.msgWarning('下载失败，下载地址存在问题')
  }
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = selectData.value[0].url
  link.download = selectData.value[0].origFileName
  document.body.appendChild(link)
  link.click()
  link.remove()
}

// 预览
function preview(row) {
  if (row.openStatus == 1) return false
  if (row.url) {
    viewFile(row.url)
  }
}

// 设置svgs
function getSvgName(type) {
  type = type.replace('文件', '')
  let fileType = 'file_'
  if (type.includes('doc')) {
    return fileType + 'word'
  }
  if (type.includes('pdf')) {
    return fileType + 'pdf'
  }
  if ('rar, zip, gz, bz2'.match(type)) {
    return fileType + 'rar'
  }
  if (type.includes('xls')) {
    return fileType + 'excel'
  }
  if (type.includes('ppt')) {
    return fileType + 'ppt'
  }
  if (type.includes('txt')) {
    return fileType + 'notepad'
  }
  if ('bmp, gif, jpg, jpeg, png'.match(type)) {
    return fileType + 'img'
  }
  if ('mp4, avi, rmvb'.match(type)) {
    return fileType + 'video'
  }
  return fileType + 'icon'
}
</script>

<style scoped lang="scss">
.fileManage {
  padding: 20px;
  width: 100%;
  padding-bottom: 0;
  .menu {
    @apply text-14px leading-50px text text-left pl-35px;
    cursor: pointer;
    color: rgb(109, 112, 112);
    &:hover {
      color: #1890ff;
    }
  }
  .active {
    color: #1890ff;
    font-weight: 600;
    background-color: rgba(231, 240, 250, 0.8);
    border-right: 2px solid #1890ff;
  }
  .fileManage_box {
    height: 85vh;
    width: 100%;
    display: flex;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.0470588235294118);
    border: 1px solid #ece6e6;
    border-radius: 10px;
  }
  .left-directory {
    height: 100%;
    width: 15%;
    min-width: 200px;
    border-right: 1px solid #ece6e6;
    padding: 20px 0;
    background-color: rgba(249, 249, 249, 1);
  }
  .right-file {
    overflow-y: auto;
    height: 100%;
    padding: 10px 20px 20px;
    width: 85%;
    max-width: calc(100% - 200px);
  }
  :deep .el-form-item--default .el-form-item__label {
    width: 30%;
  }
  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: auto !important;
  }
  :deep .el-select {
    width: 100%;
  }
  :deep .pagination-container .el-pagination {
    right: 40px;
  }
  #fileTable {
    // height: 100%;
  }
  #fileTable .cell > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .flxedDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .fileList {
    @apply mt-10px w-full max-h-150px;
    overflow-y: auto;
  }
  .pagination-container {
    position: relative;
  }
}
</style>
